// 退货退款详情

import React, { useState, useEffect } from 'react';
import { Popover } from 'antd';
import CommonTable from '@/components/CommonTable';
import CommonLoading from '@/components/CommonLoading';
import IconFont from '@/components/IconFont';
import { platformType } from '@/utils/config';
import { addCommas, formatZjfImg } from '@/utils/utils.jsx';
import { queryRefundDetailData, queryListByUniqueCode } from '../service';
import { useNavigate } from 'react-router-dom';
import styles from './index.module.less';

const OrderRefundDetail = ({ uniqueCode, refundOrderSn }) => {

  const [loading, setLoading] = useState(false);
  const [data, setData] = useState({});//详情对象
  const [progressData, setProgressData] = useState([]);
	const navigate = useNavigate();
  useEffect(() => {
    setData({});
    if(uniqueCode){
      getDetailData();
      getListByUniqueCode()
    }
  }, [uniqueCode])

  const { orderSn, outOrderSn, refundApplyOrder, ecStoreName, orderChannel, state, refundAmount, type, logisticsCompany, logisticsNo, receiverAddress, receiverName, receiverPhone, returnReason, refundRemark, buyerMessage, orderRemark, applyTime, finishTime, extend } = data

  //获取退货退款详情数据
  const getDetailData = async () => {
    setLoading(true);
    const { success, data } = await queryRefundDetailData({ uniqueCode })
    if (success) {
      setData(data);
    }
    setLoading(false);
  }

  //获取退货退款 退货进展数据
  const getListByUniqueCode = async () => {
    setLoading(true);
    const { success, data } = await queryListByUniqueCode({ uniqueCode, refundOrderSn})
    if (success) {
      setProgressData(data)
    }
    setLoading(false);
  }

  //退货凭证
  const renderExtend = (val) => {
    if (val) {
      const imgArr = JSON.parse(val);
      return (
        <div className={styles.imgFlex}>
          {imgArr.map(item => {
            return <img src={item} className={styles.imgStyle} />
          })}
        </div>
      )
    } else {
      return ''
    }
  }

  //商品退货状态渲染
  const goodsReturnStatus = (type) => {
    switch (type) {
      case 0:
        return '待登记'
        break;
      case 1:
        return '待处理'
        break;
      case 2:
        return '待上架'
        break;
      case 3:
        return '待指派'
        break;
      case 4:
        return '已指派'
        break;
      case 5:
        return '退货中'
        break;
      case 6:
        return '退货异常'
        break;
      case 7:
        return '质检异常'
        break;
      case 8:
        return '拒绝退货'
        break;
      case 9:
        return '退货成功'
        break;
      case 10:
        return '商家审核'
        break;
    }
  }

  const renderGoodsMes = (record) => {
    return (
      <div className='flex'>
        <img
          src={formatZjfImg(record.goodsImage, record.storeId, '48x48')}
          alt=""
          className={styles.imgWrap}
        />
        <div style={{ display: 'flex' }}>
          <Popover
            content={(<div className='custom-ant-popver-content'>
              {record.goodsName}
            </div>)}
          >
            <div className='textOverflowMultiTwo' style={{ maxHeight: 36, flex: 1 }}>
              {record.goodsName}
            </div>
          </Popover>
        </div>
      </div>
    )
  }

  //商品信息cloumns
  const goodsColumn = [
    {
      title: "商品",
      dataIndex: "goodsImage",
      key: "goodsImage",
      width: 249,
      render: (_, record) => renderGoodsMes(record)
    },
    {
      title: "商品唯一码",
      dataIndex: "uniqueCode",
      key: "uniqueCode",
      width: 116,
    },
    {
      title: "价格",
      dataIndex: "applyRefundAmount",
      key: "applyRefundAmount",
      width: 82,
      render: (text) => text ? <span className='common-color9'>{'¥' + addCommas(text)}</span> : ''
    },
    {
      title: "实际退款金额",
      dataIndex: "refundAmount",
      key: "refundAmount",
      width: 100,
      render: (text) => text ? <span className='common-color9'>{'¥' + addCommas(text)}</span> : ''
    },
    {
      title: "退回门店",
      dataIndex: "storeName",
      key: "storeName",
      width: 100,
    },
    {
      title: "退货员",
      dataIndex: "refundAccount",
      key: "refundAccount",
      width: 86,
    },
    {
      title: "退货退款状态",
      dataIndex: "state",
      key: "state",
      width: 128,
      render: (text) => <span className='common-color9'>{goodsReturnStatus(text)}</span>
    },
  ]

  //商品信息props
  const goodsTableProps = {
    data: [data],
    columns: goodsColumn,
    scroll: { x: 1200 }
  }

  //退货进度columns
  const progressColumn = [
    {
      title: "操作角色",
      dataIndex: "userAccount",
      key: "userAccount",
      width: 115,
    },
    {
      title: "操作界面",
      dataIndex: "operationPage",
      key: "operationPage",
      width: 100,
    },
    {
      title: "操作类型",
      dataIndex: "operationType",
      key: "operationType",
      width: 100,
    },
    {
      title: "操作时间",
      dataIndex: "createTime",
      key: "createTime",
      width: 177,
    },
    {
      title: "操作内容",
      dataIndex: "eventContent",
      key: "eventContent",
      width: 435,
    }
  ]

  //退货进度列表props
  const progressTableProps = {
    data: progressData,
    columns: progressColumn,
    scroll: { x: 1200, y: 400 },
  }

  //跳转页面去订单处理
  const linkToOrderhandle = () => {
    navigate('/views/order/list', { state: {orderSn }});
  }

  return (
    <div className="zjf-container common-color12">
      <div className={styles.outDivStyle}>
        <div className='flex'>
          <span className={styles.spanStyle}><h2 className='common-color11'>退货单号：</h2>{refundApplyOrder}</span>
          <span className={styles.spanStyle}><h2 className='common-color11'>系统订单号：</h2><a onClick={linkToOrderhandle}>{orderSn}</a></span>
          <span className={styles.spanStyle}><h2 className='common-color11'>店铺订单号：</h2>{outOrderSn}</span>
        </div>
      </div>
      <div className={styles.outDivStyle}>
        <div className='flex'>
          <span className={styles.spanStyle}><h2 className='common-color11'>商品唯一码：</h2>{uniqueCode}</span>
          <span className={styles.spanStyle}><h2 className='common-color11'>店铺信息：</h2>{ecStoreName && (
            <>
              <span>{platformType[orderChannel] && <IconFont type={`icon${platformType[orderChannel]}`} style={{ fontSize: '16px', marginRight: '2px' }} />}</span>
              <span>{ecStoreName}</span>
            </>
          )}</span>
          <span className={styles.spanStyle}><h2 className='common-color11'>退货退款状态：</h2><span className='common-color9'>{goodsReturnStatus(state)}</span></span>
        </div>
      </div>
      <div className={styles.outDivStyle}>
        <div className='flex'>
          <span className={styles.spanStyle}><h2 className='common-color11'>退款金额：</h2><span className='common-color9'>{refundAmount ? '¥' + refundAmount : ''}</span></span>
          <span className={styles.spanStyle}><h2 className='common-color11'>退货类型：</h2>{type == 0 ? '仓内退货' : '快递退货'}</span>
          <span className={styles.spanStyle}><h2 className='common-color11'>退回快递：</h2>{logisticsCompany}</span>
        </div>
      </div>
      <div className={styles.outDivStyle}>
        <div className='flex'>
          <span className={styles.spanStyle} style={{ width: '49%' }}><h2>退回运单号：</h2>{logisticsNo}</span>
          <span className={styles.imgSpanStyle}><h2 className='common-color11'>收货信息：</h2>{receiverName && receiverName + '，'}{receiverPhone && receiverPhone + '，'}{receiverAddress}</span>
        </div>
      </div>
      <div className={styles.outDivStyle}>
        <div className='flex'>
          <span className={styles.spanStyle}>
            <h2 className='common-color11'>退货退款原因：</h2>
            <Popover content={<span style={{ width: 300 }}>{returnReason}</span>}>
              <span className='textOverflowMultiTwo'>{returnReason}</span>
            </Popover>
          </span>
          <span className={styles.spanStyle} style={{ width: '66%' }}><h2 className='common-color11'>退货备注：</h2><span className='common-color9'>{refundRemark}</span></span>
        </div>
      </div>
      <div className={styles.outDivStyle}>
        <div className='flex'>
          <span className={styles.spanStyle}><h2 className='common-color11'>买家备注：</h2>{buyerMessage}</span>
          <span className={styles.spanStyle}><h2 className='common-color11'>订单备注：</h2><span className='common-color9'>{orderRemark}</span></span>
        </div>
      </div>
      <div className={styles.outDivStyle}>
        <div className='flex'>
          <span className={styles.spanStyle}><h2 className='common-color11'>申请时间：</h2>{applyTime}</span>
          <span className={styles.spanStyle}><h2 className='common-color11'>完成时间：</h2><span className='common-color9'>{finishTime}</span></span>
        </div>
      </div>
      <div className={styles.outDivStyle}>
        <span className={styles.imgSpanStyle}><h2 className='common-color11' style={{ width: 148 }}>退货申请凭证：</h2>{renderExtend(extend)}</span>
      </div>
      <div className={`common-color11 ${styles.detailTitle}`} style={{ marginTop: 0 }}>商品信息</div>
      <CommonTable {...goodsTableProps} />
      <div className={`common-color11 ${styles.detailTitle}`}>退货进展</div>
      <CommonTable {...progressTableProps} />
      <CommonLoading loading={loading} />
    </div>
  )
}
export default OrderRefundDetail
